<template>
	<view class="page-box top">
		<SearchCom :searchFun="searchFun" :data="search" :resetSearchFun="resetSearchFun" :confirmSearchFun="confirmSearchFun" placeholder="请输入订单号">
				<view class="search-item">
					<view class="search-item-title">
						名称
					</view>
					<input class="search-item-input" v-model="search.name"  placeholder="请输入内容" />
				</view>
				<view class="search-item">
					<view class="search-item-title">
						车牌号码
					</view>
					<input class="search-item-input" v-model="search.siji_chepai"  placeholder="请输入内容" />
				</view>
				<view class="search-item">
					<view class="search-item-title">
						司机名称
					</view>
					<input class="search-item-input" v-model="search.siji_name"  placeholder="请输入内容" />
				</view>
				<view class="search-item">
					<view class="search-item-title">
						司机电话
					</view>
					<input class="search-item-input" v-model="search.siji_phone"  placeholder="请输入内容" />
				</view>
				<view class="search-item">
					<view class="search-item-title">
						合同编号
					</view>
					<input class="search-item-input" v-model="search.hetong_sn"  placeholder="请输入内容" />
				</view>
				<view class="search-item">
					<view class="search-item-title">
						品名
					</view>
					<input class="search-item-input" v-model="search.pingming"  placeholder="请输入内容" />
				</view>
				<view class="search-item">
					<view class="search-item-title">
						创建人名称
					</view>
					<input class="search-item-input" v-model="search.createuserid"  placeholder="请输入内容" />
				</view>
		</SearchCom>
		
		<view class="list-box">
			<view class="list-item" v-for="(item,index) in lists" :key="index" @click="goDetail(item)">
				<uni-swipe-action>
					<!-- 使用插槽 （请自行给定插槽内容宽度）-->
					<uni-swipe-action-item>
						<view class="list-item-content">
							<view class="qidian-zhongdian">
								<view class="qidian">{{item.qidian}}</view>
								<img class="icon" src="../../static/img/youjiantou.png" alt="" />
								<view class="zhongdian">{{item.zhongdian}}</view>
							</view>
							<view class="ul-box">
								<view class="li-box">
									<view class="icon"></view>
									<view class="label">配送单号:</view>
									<view class="value">{{item.order_sn}}</view>
								</view>
								<view class="li-box">
									<view class="icon"></view>
									<view class="label">货物信息:</view>
									<view class="value">{{item.name}} | {{item.maozhong}} | {{item.number}}</view>
								</view>
								<view class="li-box">
									<view class="icon"></view>
									<view class="label">车辆信息:</view>
									<view class="value">{{item.siji_name}} | {{item.siji_chepai}}</view>
								</view>
								<view class="status" :style="item.statusStyle">{{ item.statusText }}</view>
							</view>
						</view>
						
						<template v-slot:right>
							<!-- <view class="swipe-btn">
								<view class="edit-btn" @click.stop="editFun(item)">
									编辑
								</view>
								<view class="del-btn" @click.stop="delFun(item.order_sn)">
									删除
								</view>
							</view> -->
						</template>
					</uni-swipe-action-item>
				</uni-swipe-action>
				
			</view>
		</view> 
		
		<view class="load-more" v-if="hasMore && showMore">
				加载中...
		</view>
		
		<view class="load-more" v-if="!hasMore">
				没有更多了~
		</view>
	</view>
</template>

<script setup>
	import {
	    onLoad,
		onShow,
		onPullDownRefresh,
		onReachBottom
	} from "@dcloudio/uni-app";
	import { ref,computed } from "vue";
	import { getUserInfo } from "@/utils/getUserInfo.js"
	import { GetAllFahuoOrderList,DeleteZhuangcheOrder } from "@/configure/api/zhuangcheOrder.js"
	import { showSuccessMsg } from "@/utils/msg";
	import SearchCom from "@/components/common/SearchCom/SearchCom.vue";
	
	const userInfo = ref()
	const search = ref({
		order_sn: '',
		hetong_sn: '',
		siji_chepai: '',
		siji_name: '',
		siji_phone: '',
		pingming: '',
		name: '',
		createuserid: ''
	})
	
	const searchFun = (keywords)=>{
		search.value.order_sn = keywords
		getLists(true)
	}
	
	const resetSearchFun = () => {
		search.value = {
			order_sn: '',
			hetong_sn: '',
			siji_chepai: '',
			siji_name: '',
			siji_phone: '',
			pingming: '',
			name: '',
			createuserid: ''
		}
	}
	
	const confirmSearchFun = () => {
		searchFun()
	}
	
	const pageNo = ref(1);
	const pageSize = ref(10);
	const total = ref(10);
	const showMore = ref(false);
	const lists = ref([])
	const statusStyleArr = ['background: #f89d39','background: var(--successColor)','background: var(--successColor)','background: var(--successColor)']
	const statusTextArr = ['未处理','录入仓库','直接销售','异地泊车']
	
	const getLists = (reload) => {
		
		showMore.value = true;
		
		if(reload){
			pageNo.value = 1
			lists.value = []
		}
		
		const opt = {pageNo: pageNo.value,pageSize: pageSize.value};
		
		Object.keys(search.value).forEach((v,i)=>{
			if(search.value[v]){
				opt[v] = search.value[v]
			}
		})
	
		GetAllFahuoOrderList(opt).then((data)=>{
			lists.value = [...lists.value,...data.data];
			lists.value = lists.value.map(v=>{
				return{
					...v,
					statusStyle: statusStyleArr[parseInt(v.status)],
					statusText: statusTextArr[parseInt(v.status)]
				}
			})
			let obj = {};
			
			lists.value = lists.value.reduce (function(item,next){
			
				obj[next.id] ? ' ' : obj[next.id]  = true && item.push(next)
				
				return item;
			
			},[]);
			
			total.value = parseInt(data.msg);
			showMore.value = false;
			uni.stopPullDownRefresh();
			
		})
		
	}
	
	onPullDownRefresh(()=> {
		getLists(true);
	}) 
	
	const hasMore = computed(()=>{
		return pageNo.value * pageSize.value < total.value
	})
	
	onReachBottom(()=>{
		if(  hasMore.value && !showMore.value ){
			pageNo.value ++;
			getLists();
		}
		
	})
	
	const goDetail = (item) => {
		uni.navigateTo({url:`/pages/me/fahuo/fahuo-detail-add-edit/fahuo-detail-add-edit?state=read&order_sn=${item.order_sn}`})
	}
	
	const editFun = (item) => {
		uni.navigateTo({url:`/pages/me/fahuo/order-detail-add-edit/order-detail-add-edit?state=edit&order_sn=${item.order_sn}`})
	}
	
	const delFun = (order_sn) => {
		uni.showModal({
		    title: '提示',
		    content: '确认删除?',
		    success: async function (res) {
		        if (res.confirm) {
					
					let res = await DeleteZhuangcheOrder({order_sn})
					if(res.code == 200){
						showSuccessMsg("删除成功!");
						getLists(true)
					}
					
		        } else if (res.cancel) {
		            
		        }
		    }
		});
	}
	
	onLoad((detail)=>{
		
	})
	
	onShow((detail)=>{
		getUserInfo().then((res)=>{
			userInfo.value = res.data;
			getLists(true);
		})
	})

</script>

<style lang="scss">
	.page-box{
		
		.list-box{
			width: 100%;
			padding-top: 30rpx;
			padding-top: 0;
			box-sizing: border-box;
			
			.list-item:last-child{
				margin-bottom: 0;
			}
			
			.list-item{
				width: 100%;
				margin-bottom: 30rpx;
				border-radius: 12rpx;
				overflow: hidden;
				background-color: #fff;
				box-shadow: rgba(0, 0, 0, 0.04) 0px 2px 4px;
				
				.list-item-content{
					padding: 65rpx 55rpx 43rpx 40rpx;
					box-sizing: border-box;
					width: 100%;
					padding: 65rpx 55rpx 43rpx 40rpx;
					box-sizing: border-box;
					background-color: #fff;
					box-shadow: rgba(0, 0, 0, 0.04) 0px 2px 4px;
					overflow: hidden;
					position: relative;
					
					.qidian-zhongdian{
						margin-bottom: 30rpx;
						@include flex-start();
						.qidian{
							font-size: 30rpx;
							color: #333;
						}
						.icon{
							width: 45rpx;
							height: 7rpx;
							margin: 0 20rpx;
						}
						.zhongdian{
							font-size: 30rpx;
							color: #333;
						}
					}
					
					.ul-box{
						.li-box{
							margin-bottom: 20rpx;
							@include flex-start();
							.icon{
								width: 10rpx;
								height: 10rpx;
								border-radius: 100rpx;
								background-color: #d2d2d2;
							}
							.label{
								font-size: 26rpx;
								color: #888888;
								margin: 0 15rpx;
							}
							.value{
								font-size: 26rpx;
								color: #888888;
							}
						}
					}
					
					.status{
						position: absolute;
						right: 0;
						top: 0;
						color: #fff;
						font-size: 28rpx;
						padding: 10rpx 20rpx;
						border-bottom-left-radius: 12rpx;
					}
				}
			}
		}
		
	}
</style>
